<template>
	<view style="position: relative; background-color: #e8f1ff;height: auto;">
		<view style="background-color: #016cfa; height: 100rpx;"></view>
		<view class="select-top">
			<view style="display: flex;justify-content: space-between;">
				<view class="top-item" @click="openMonth">
					<uv-datetime-picker ref="monthPicker" v-model="selectedMonth" mode="year-month"
						@confirm="monthConfirm">
					</uv-datetime-picker>
					{{this.showSelectedMonth}}
					<!-- <uv-text text="选择日期"></uv-text> -->
				</view>
				<view class="top-item" @click="openDay">
					<uv-picker ref="dayPicker" :columns="days" @confirm="dayConfirm" v-model="selectedDay"></uv-picker>
					<!-- <uv-text text="选择时间"></uv-text> -->
					{{this.showSelectedDay}}
				</view>
			</view>
			<view style="margin-top: 35rpx;border-top: 1px solid #f0f0f0;">
				<uv-tabs :list="list" @change="changeStatus" :active-style="{color: '#026cf9'}"></uv-tabs>
			</view>
		</view>
		<view class="uni-wrap" v-if="this.currentTopIndex == 1">
			<view class="meeting-project" v-for="meeting in myMeetingListFinish" :key="meeting.id"
				@click.capture="getDetail(meeting.id)">
				<view style="width: 90%;margin-left: 5%;padding-top: 15rpx;">

					<view style="font-size: 30rpx; font-weight: 450; ">
						{{meeting.name}}
					</view>
					<view style="display: flex;">
						<view style="width: 65%; font-size: 24rpx;">
							{{meeting.createName}} ({{meeting.createDepartmentName}})
						</view>
						<view style="width: 35%;display: flex;font-size: 25rpx;">
							<view style="font-size: 16rpx; 
									color: #1BBB70;
									font-weight: 600;
									border: 1rpx solid #1BBB70; border-radius: 15rpx;width: 45%;text-align: center;height: 35rpx;">
								{{meeting.isInout}}
							</view>
							<view style="width: 8%;"></view>
							<view v-if="meeting.livery !== 1" style="font-size: 16rpx;
								color: #F5A338;
								font-weight: 600;
								border: 1rpx solid #F5A338; border-radius: 15rpx;width: 45%;text-align: center;height: 35rpx;">无需会服</view>
							<view style="font-size: 16rpx;
								 color: #F5A338 ;
								 font-weight: 600;
								 border: 1rpx solid #F5A338 ; border-radius: 15rpx;width: 45%;text-align: center;height: 35rpx;"
								v-if="meeting.livery == 1">
								需要会服
							</view>
						</view>
					</view>


					<view style="position: absolute;top: 10rpx;right: 15rpx; font-size: 26rpx;">
						{{meeting.time}}
					</view>
					<view style="font-size: 22rpx;margin-top: 10rpx;color: gray;">
						<view class="ellipsis">参会人员：{{meeting.accountNames}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-wrap" v-if="this.currentTopIndex == 0">
			<view class="meeting-project" v-for="meeting in myMeetingListNoFinish" :key="meeting.id"
				@click.capture="getDetail(meeting.id)">
				<view style="width: 90%;margin-left: 5%;padding-top: 15rpx;">

					<view style="font-size: 30rpx; font-weight: 450; ">
						{{meeting.name}}
					</view>
					<view style="display: flex;">
						<view style="width: 65%; font-size: 24rpx;">
							{{meeting.createName}} ({{meeting.createDepartmentName}})
						</view>
						<view style="width: 35%;display: flex;font-size: 25rpx;">
							<view style="font-size: 16rpx; 
			 							color: #1BBB70;
			 							font-weight: 600;
			 							border: 1rpx solid #1BBB70; border-radius: 15rpx;width: 45%;text-align: center;height: 35rpx;">
								{{meeting.isInout}}
							</view>
							<view style="width: 8%;"></view>
							<view v-if="meeting.livery !== 1" style="font-size: 16rpx;
			 						color: #F5A338;
			 						font-weight: 600;
			 						border: 1rpx solid #F5A338; border-radius: 15rpx;width: 45%;text-align: center;height: 35rpx;">无需会服</view>
							<view style="font-size: 16rpx;
			 						 color: #F5A338 ;
			 						 font-weight: 600;
			 						 border: 1rpx solid #F5A338 ; border-radius: 15rpx;width: 45%;text-align: center;height: 35rpx;"
								v-if="meeting.livery == 1">
								需要会服
							</view>
						</view>
					</view>


					<view style="position: absolute;top: 10rpx;right: 15rpx; font-size: 26rpx;">
						{{meeting.time}}
					</view>
					<view style="font-size: 22rpx;margin-top: 10rpx;color: gray;">
						<view class="ellipsis">参会人员：{{meeting.accountNames}}</view>
					</view>
				</view>
			</view>
		</view>

<view style="height: 200rpx;width: 100%;"></view>

	</view>
</template>

<script>
	import api from '@/api/api.js'
	import util from '@/api/util.js'

	export default {
		data() {
			return {
				days: [
					['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日',
						'16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日',
						'29日', '30日', '31日'
					],
				],
				finishMyMeetingList: [],
				noFinishMyMeetingList: [],
				selectedDay: '',
				selectedMonth: Number(new Date()),
				initSelectedMonth: new Date(),
				showSelectedMonth: '',
				showSelectedDay: '请选择日期',
				currentTopIndex: 0,
				value: '',
				searchDay: '',
				myMeetingListFinish: [],
				myMeetingListNoFinish: [],
				list: []
			}
		},
		created() {
			// this.isAdmin();
			this.initialize();
			this.showSelectedMonth = this.formatTimestampToYearMonth(this.selectedMonth)
		},
		computed: {

		},

		watch: {

		},
		methods: {
			getDetail(id) {

				uni.navigateTo({
					url: `/pages/app/metting/detailMeeting?meetingId=${id}&type=2`,
				});
				console.log('点击了 id 为', id);

			},
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			isAdmin(){
				uni.getStorage({
				       key: 'roleId',
				       success: (res) => {
				         console.log('获取当前的roleId', res.data);
				         if (res.data == 1) {
				           uni.setTabBarItem({
				             index: 1,
				             visible: false
				           });
				         }
				       }
				     });
			},
			//-------------------------------初始化----------//根据年月日进行筛选--------------------------//
			initialize() {
				const now = new Date(this.selectedMonth);
				util.request(api.AdminMeetingQuery, {
					monthId: now.getMonth() + 1,
					dayId: this.selectedDay
				}, 'GET').then(data => {
					console.log(data);
					const now = new Date();
					data.rows.forEach(item => {
						if (item.endTime < now) {
							this.finishMyMeetingList.push(item);
						} else {
							this.noFinishMyMeetingList.push(item);
						}
					});

					this.myMeetingListFinish = this.finishMyMeetingList.map(meeting => {
						return {
							...meeting, // 展开原始对象以保留所有现有属性  
							time: this.formatTimeRange(meeting.startTime, meeting
								.endTime) // 拼接 start 的日期时间和 end 的时间部分  
						};
					});
					this.myMeetingListNoFinish = this.noFinishMyMeetingList.map(meeting => {
						return {
							...meeting, // 展开原始对象以保留所有现有属性
							time: this.formatTimeRange(meeting.startTime, meeting
								.endTime) // 拼接 start 的日期时间和 end 的时间部分 
						};
					});
					this.list.push({
						name: '待结束(' + this.myMeetingListNoFinish.length + ')'
					})
					this.list.push({
						name: '已结束(' + this.myMeetingListFinish.length + ')'
					})
					console.log(this.list);
				})


			},
			UnInitialize() {
				const now = new Date(this.selectedMonth);
				util.request(api.AdminMeetingQuery, {
					monthId: now.getMonth() + 1,
					dayId: this.selectedDay
				}, 'GET').then(data => {
					console.log(data);
					const now = new Date();
					data.rows.forEach(item => {
						if (item.endTime < now) {
							this.finishMyMeetingList.push(item);
						} else {
							this.noFinishMyMeetingList.push(item);
						}
					});

					this.myMeetingListFinish = this.finishMyMeetingList.map(meeting => {
						return {
							...meeting, // 展开原始对象以保留所有现有属性  
							time: this.formatTimeRange(meeting.startTime, meeting
								.endTime) // 拼接 start 的日期时间和 end 的时间部分  
						};
					}).reverse();
					this.myMeetingListNoFinish = this.noFinishMyMeetingList.map(meeting => {
						return {
							...meeting, // 展开原始对象以保留所有现有属性
							time: this.formatTimeRange(meeting.startTime, meeting
								.endTime) // 拼接 start 的日期时间和 end 的时间部分 
						};
					}).reverse();

					this.list.push({
						name: '待结束(' + this.myMeetingListNoFinish.length + ')'
					})
					this.list.push({
						name: '已结束(' + this.myMeetingListFinish.length + ')'
					})

				})


			},
			//顶部状态切换
			changeStatus(e) {
				console.log(e.index);
				this.currentTopIndex = e.index;
			},
			//打开月份选择器
			openMonth() {
				this.$refs.monthPicker.open();
			},
			//打开日期选择器
			openDay() {
				this.$refs.dayPicker.open();
			},
			//月份更改
			monthConfirm(e) {
				console.log(e);
				this.selectedMonth = e.value;
				this.showSelectedMonth = this.formatTimestampToYearMonth(e.value)
				this.finishMyMeetingList = [];
				this.noFinishMyMeetingList = [];
				this.myMeetingListFinish = [];
				this.myMeetingListNoFinish = [];
				this.list = [];
				this.selectedDay = '';
				this.showSelectedDay = '请选择日期';
				this.UnInitialize();
			},
			//日期更改
			dayConfirm(e) {
				console.log(e);
				this.finishMyMeetingList = [];
				this.noFinishMyMeetingList = [];
				this.myMeetingListFinish = [];
				this.myMeetingListNoFinish = [];
				this.list = [];
				this.selectedDay = e.indexs[0] + 1;
				this.showSelectedDay = e.value[0];
				this.UnInitialize();
			},
			//格式化展示月份
			formatTimestampToYearMonth(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以要+1，并用padStart保证总是两位数  
				return `${year}年${month}月`;
			},
			formatTimeRange(startTimestamp, endTimestamp) {
				const startDate = new Date(startTimestamp);
				const endDate = new Date(endTimestamp);

				const startYear = startDate.getFullYear();
				const startMonth = startDate.getMonth() + 1;
				const startDay = startDate.getDate();
				const startHour = startDate.getHours();
				const startMinute = startDate.getMinutes();
				const formattedStartMinute = startMinute < 10 ? `0${startMinute}` : startMinute;

				const endHour = endDate.getHours();
				const endMinute = endDate.getMinutes();
				const formattedEndMinute = endMinute < 10 ? `0${endMinute}` : endMinute;

				const formattedStartTime = `${startYear}-${startMonth}-${startDay}-${startHour}:${formattedStartMinute}`;
				const formattedEndTime = `${endHour}:${formattedEndMinute}`;

				return `${formattedStartTime}-${formattedEndTime}`;
			},


		},
	}
</script>
<style lang="scss">
	// 定义一些全局变量  
	$primary-color: #007bff; // 主色调  
	$secondary-color: #6c757d; // 次要色调  
	$text-color: #333; // 文本颜色  
	$border-radius: 8px; // 边框圆角  

	.meeting-item {
		// font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-size: 22rpx;
		color: black;
		margin-bottom: 10rpx;
	}

	.ellipsis {
		font-size: 22rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.right-side-views {
		position: absolute;
		top: 80rpx; // 调整垂直方向的偏移
		right: 25rpx;
	}

	.right-item {
		font-size: 22rpx;
		color: #e89f42;
	}

	.select-day {
		// width: 100%;
		border: solid 1rpx black;
		border-radius: 12rpx;
		margin: 35rpx 18rpx 10rpx 20rpx;
		padding-left: 15rpx;
	}

	.uni-wrap {
		display: flex;
		flex-direction: column;
		height: 100Vh; // 总是全屏高度  
		// padding: 20px; // 添加内边距  
		box-sizing: border-box; // 包含内边距和边框  
		// background-color: #f8f9fa; // 浅灰色背景  
		margin-top: 100rpx;
	}

	.uni-section {
		background-color: white; // 白色背景  
		border-radius: $border-radius; // 圆角边框  
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 阴影效果  
		margin-bottom: 20px; // 底部间距  
		padding: 15px; // 内边距  
		position: relative; // 为了绝对定位装饰元素  

		.title {
			font-size: 18px; // 标题字体大小  
			color: $primary-color; // 标题颜色  
			margin-bottom: 10px; // 标题底部间距  
		}

		.sub-title {
			font-size: 14px; // 副标题字体大小  
			color: $secondary-color; // 副标题颜色  

			// 假设有装饰元素  
			&:before {
				content: '';
				position: absolute;
				left: -20px; // 绝对定位到左侧  
				top: 50%;
				transform: translateY(-50%); // 垂直居中  
				width: 10px; // 宽度  
				height: 10px; // 高度  
				background-color: $primary-color; // 背景色  
				border-radius: 50%; // 圆形  
			}
		}

		// 假设的right插槽样式  
		.right {
			position: absolute;
			right: 15px; // 右侧定位  
			top: 15px; // 顶部定位  
			font-size: 14px; // 字体大小  
			color: $text-color; // 文本颜色  
		}
	}

	.mb-10 {
		// 如果这个类不再需要，可以移除或替换为更具体的样式  
		// 例如，直接在.uni-section上设置margin-bottom  
	}

	// 其他样式可以根据需要继续调整  
</style>
<style lang="scss">
	.select-top {
		position: absolute;
		width: 90%;
		top: 0;
		left: 5%;
		height: 200rpx;
		background-color: white;
		top: 10rpx;
		border-radius: 26rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 5rpx;
	}

	.top-item {
		height: 50rpx;
		font-size: 25rpx;
		font-size: 35rpx;
		text-align: center;
		// width: 30%; // 假设子视图占较小比例
		font-weight: 500;
		padding: 10rpx;
	}

	.meeting-project {
		position: relative;
		height: 200rpx;
		width: 90%;
		margin-left: 5%;
		margin-top: 30rpx;
		background-color: white;
		border-radius: 26rpx;
	}

</style>